<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>个人中心</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  
  <link rel="alternate icon" type="img/hengwang-1.png" href="img/hengwang-1.png">
  <link rel="stylesheet" href="css/amazeui.css"/>
  <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<header class="am-topbar header">
	<div class="am-container-1">
		<div class="left hw-logo">
		  <!--<img class=" logo" src="img/HENGWANG.png"></img>-->
		  <img class="word" src="img/hw-word.png"></img>
    </div>
  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
          data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
      class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse right" id="doc-topbar-collapse">
    

    <div class=" am-topbar-left am-form-inline am-topbar-right" role="search">
      <ul class="am-nav am-nav-pills am-topbar-nav hw-menu">
      <li><a href="index.html">首页</a></li>
      <li class="hw-menu-active"><a href="solutions.html">个人中心</a></li>
      <li><a href="product-show.html">订单服务 </a></li>
      <li><a href="customer-case.html">套餐服务</a></li>
      <li><a href="service-center.html">服务中心 </a></li>
      <li><a href="news.html">魔发学院 </a></li>
      <li><a href="about-us.html">关于我们</a></li>
      <li><a href="recruit.html">招贤纳士 </a></li>
    </ul>
    </div>

  </div>
  </div>
</header>
<div class="toppic">
	<div class="am-container-1">
	 <div class="toppic-title left">
			<i class="am-icon-lightbulb-o toppic-title-i"></i>
			<span class="toppic-title-span">个人中心</span>
			<p>Solutions</p>
		</div>
		<div class="right toppic-progress">
			<span><a href="index.html" class="w-white">首页</a></span>
			<i class=" am-icon-arrow-circle-right w-white"></i>
			<span><a href="solutions.html" class="w-white">个人中心</a></span>
		</div>
	</div>
</div>

<div class="solutions-content-div"  >
	<div class="container">
		<div class="link">
			<div class="text">个人中心</div>
		</div>
		<div class="link">
			<div class="text">历史订单</div>
		</div>
		<div class="link">
			<div class="text">我的自定义</div>
		</div>
		<div class="link">
			<div class="text">我的收藏</div>
		</div>
		<div class="link">
			<div class="text">消息中心</div>
		</div>
		<div class="link">
			<div class="text">退出</div>
		</div>
	</div>

	<div class="cusCenter">
		<div id="gerenzhongxin" class="is-selected">
			<span class="toppic-title-span " >个人中心</span>
			<hr  style="background-color:#18c4f1;height: 1px;width:120px;border: none;"/>
			<br>
			<div class="slideTxtBox">
				<div class="hd">
					<ul><li>更改头像</li><li>修改密码</li><li id="qwer">基本资料</li></ul>
				</div>
				<div class="bd">
					<ul>
						请选择需要上传的头像：
						<input type="file" id="input-file" name="file" accept="image/*" style="height:40px">
					</ul>
					<ul>
						请输入您的原密码：<input type="password">
						<br>
						请输入您的新密码：<input type="password">
						<br>
						请确认您的新密码：<input type="password">
						<br>
						<button>保存</button>
					</ul>
					<ul>
						<form id="myform">
							<li><lable>姓名：</lable><input type="text" name="name" id="name"> </li>
							<br>
							<li><lable>性别：</lable><input type="radio" name="sex" checked="checked" id="sex">男 &nbsp;&nbsp;<input type="radio" name="sex">女 </li>
							<br>
							<li><lable>年龄：</lable><input type="text" name="age"></li>
							<br>
							<li><lable>会员状态：</lable><input type="text" name="member"></li>
							<br>
							<li><lable>手机号码：</lable><input type="text" name="phone"></li>
							<br>
						</form>
						<li> </li>
						<li> </li>
					</ul>
				</div>
			</div>



		</div>
	</div>
	<div class="cusCenter" style="display: none">
		<div id="lishidingdan">
			<span class="toppic-title-span">历史订单</span>
			<hr  style="background-color:#18c4f1;height: 1px;width:120px;border: none;"/>
			<div class="slideTxtBox">
				<div class="hd">
					<ul><li>全部</li><li>待支付</li><li>确认完成</li><li>待评价</li></ul>
				</div>
				<div class="bd">
					<ul>
						<table class="am-table am-table-striped am-table-hover">
							<thead>
							<tr>
								<th></th>
								<th>套餐名字</th>
								<th>价格</th>
								<th>订单状态</th>
								<th>订单详情</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr class="am-active">
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							</tbody>
						</table>

						<ul class="am-pagination" style="color: #0a0a0a;margin-right: 30px">
							<li class="am-disabled"><a href="#">&laquo;</a></li>
							<li class="am-active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul>

					</ul>
					<ul>
						<table class="am-table am-table-striped am-table-hover">
							<thead>
							<tr>
								<th></th>
								<th>套餐名字</th>
								<th>价格</th>
								<th>订单状态</th>
								<th>订单详情</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr class="am-active">
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							</tbody>
						</table>
					</ul>
					<ul>
						<table class="am-table am-table-striped am-table-hover">
							<thead>
							<tr>
								<th></th>
								<th>套餐名字</th>
								<th>价格</th>
								<th>订单状态</th>
								<th>订单详情</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr class="am-active">
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							</tbody>
						</table>
					</ul>
					<ul>
						<table class="am-table am-table-striped am-table-hover">
							<thead>
							<tr>
								<th></th>
								<th>套餐名字</th>
								<th>价格</th>
								<th>订单状态</th>
								<th>订单详情</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr class="am-active">
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							<tr>
								<td><img src="images/我的订单/u377_mouseOver.png" alt="套餐图片"></td>
								<td>资深设计师洗吹造型美发套餐</td>
								<td>￥48</td>
								<td>取消订单</td>
								<td>订单详情</td>
								<td>确认完成</td>
							</tr>
							</tbody>
						</table>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="cusCenter" >
		<div id="wodezidingyi">
			<span class="toppic-title-span">我的自定义</span>
			<hr  style="background-color:#18c4f1;height: 1px;width:120px;border: none;"/>
		</div>
	</div>
	<div class="cusCenter">
		<div id="wodeshoucang">
			<span class="toppic-title-span">我的收藏</span>
			<hr  style="background-color:#18c4f1;height: 1px;width:120px;border: none;"/>
		</div>
	</div>
	<div class="cusCenter">
		<div id="xiaoxizhongxin">
			<span class="toppic-title-span" style="z-index:-3">消息中心</span>
			<hr  style="background-color:#18c4f1;height: 1px;width:120px;border: none;"/></div>
	</div>

</div>




</div>


<footer class="footer ">

	<ul>

		<li class="am-u-lg-4 am-u-md-4 am-u-sm-12 part-5-li2">
			<div class="part-5-title">联系我们</div>
			<div class="part-5-words2">
				<span>Copyright ©2018 专业综合设计</span>
				<span>店家联系电话：xxxxx</span>
				<span>author by Mr.huang</span>
				<span>邮箱:support@siheng.site</span>
				<span><i class="am-icon-phone"></i><em >027-520520</em></span>
			</div>
		</li>
		<li class="am-u-lg-4 am-u-md-4 am-u-sm-12 ">
			<div class="part-5-title">相关链接</div>
			<div class="part-5-words2">
				<ul class="part-5-words2-ul">
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="solutions.html">个人中心</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="product-show.html">订单服务</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="customer-case.html">套餐服务</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="service-center.html">服务中心</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="about-us.html">关于我们</a></li>
					<li class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a href="recruit.html">招贤纳士</a></li>
					<div class="clear"></div>
				</ul>
			</div>
		</li>
		<div class="clear"></div>
	</ul>

</footer>

</body>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery.min.js"></script>
<!--<![endif]-->
<script src="js/amazeui.js"></script>
<script src="js/amazeui.min.js"></script>
<script src="js/Treatment.js"></script>
<script src="js/jquery.mockjax.js"></script>
<!--<script src="js/jquery1.42.min.js"></script>-->
<script src="js/jquery.SuperSlide.2.1.3.source.js"></script>
<script>
    //For Demo only
    // var links = document.getElementsByClassName('link')
    // for(var i = 0; i <= links.length; i++)
    //     addClass(i)
    //
    //
    // function addClass(id){
    //     setTimeout(function(){
    //         if(id > 0) links[id-1].classList.remove('hover')
    //         links[id].classList.add('hover');
    //     }, id*750)
    // }
    // $(".slideTxtBox").slide({});
    $(".slideTxtBox").slide({ effect:"fade",autoPlay:"false",trigger:"click",easing:"easeInQuint",delayTime:0,pnLoop:false });
    $(".container").on('click',function (event) {
        // console.log($(event.target).text());
		var tmp=$(event.target).text();
		// console.log(tmp);
		var idd="";
        switch (tmp)
        {
            case "个人中心":idd="#gerenzhongxin";
                break;
            case "历史订单":idd="#lishidingdan";
                break;
            case "我的自定义":idd="#wodezidingyi";
                break;
            case "我的收藏":idd="#wodeshoucang";
                break;
            case "消息中心":idd="#xiaoxizhongxin";
                break;
        }
        $(".cusCenter>div[id!=idd]").removeClass('is-selected');
        $(idd).addClass('is-selected');
        // $('#doc-my-tabs').tabs();
        // $(".slideTxtBox").slide({});
        // $(".slideTxtBox").slide({ effect:"fade",autoPlay:"false",trigger:"click",easing:"easeInQuint",delayTime:0,pnLoop:false });
        // $(".slideTxtBox").slide({trigger:"click",easing:"easeInQuint",pnLoop:false});
    });



    $("#qwer").on('click',function () {
        // alert("sakjdfhsajkfdnskjgdskj");
        // jQuery.ajax({
        //     url: 'http://localhost:8080/getPersonal.action',
        //     type: 'POST',
        //     dataType: 'json',
        //     contentType:'application/json',
        //     data: JSON.stringify(info),
        //     complete: function(xhr, textStatus) {
        //         // alert("complete");
        //     },
        //     success: function(data, textStatus, xhr) {
        //         $("#myform>input[name='name']").val(data.data.name);
        //         $("#myform>input[name='sex']").val(data.data.sex);
        //         $("#myform>input[name='age']").val(data.data.age);
        //         $("#myform>input[name='member']").val(data.data.member);
        //         $("#myform>input[name='phone']").val(data.data.phone);
        //     },
        //     error: function(xhr, textStatus, errorThrown) {
        //         // alert(errorThrown);
        //     }
        // });
        var url="Ajax/getPersonal.action";
        var JsonData="";
        AjaxPost(url, JsonData,
            function () {
                //ajax加载中
            },
            function (data) {
                //ajax返回
                // alert(data.data.name);
                $("#name").val(data.data.name);
                $("#myform>input[name='sex']").val(data.data.sex);
                $("#myform>input[name='age']").val(data.data.age);
                $("#myform>input[name='member']").val(data.data.member);
                $("#myform>input[name='phone']").val(data.data.phone);


            });

    });
	$.mockjax({
        url: 'Ajax/getPersonal.action',
        status: 200,
        responseTime: 50,
        responseText: {"Status":"ok","Text":"成功<br /><br />","data":{
                "id" : 1,
                "name" : "yujian",
                "phone" : "177",
                "is_member" : 1,
                "is_student" : 1,
                "sex" : 1,
                "age" : 17,
                "password" : "yujian"
            }}
    });
    $.mockjax({
        url: 'False',
        status: 200,
        responseTime: 50,
        responseText: {"Status":"Erro","Erro":"有误"}
    });
</script>


</html>
